import { useState } from 'react';
import { Button, Card, Divider, Icon, Image, Shape } from '@fomantic-react/main';

export default () => {
  const [change, setChange] = useState(false);

  return (
    <>
      <Shape change={change}>
        <Shape.Side active>
          <Card>
            <Image src="/images/steve.jpg" wrapped />
            <Card.Content>
              <Card.Header>Steve Jobes</Card.Header>
              <Card.Meta>
                <a>Acquaintances</a>
              </Card.Meta>
              <Card.Description>
                Steve Jobes is a fictional character designed to resemble someone familiar to readers.
              </Card.Description>
            </Card.Content>
            <Card.Content extra>
              <span className="right floated">Joined in 2014</span>
              <span>
                <Icon name="user" />
                151 Friends
              </span>
            </Card.Content>
          </Card>
        </Shape.Side>
        <Shape.Side>
          <Card>
            <Image src="/images/stevie.jpg" wrapped />
            <Card.Content>
              <Card.Header>Stevie Feliciano</Card.Header>
              <Card.Meta>Joined in 2014</Card.Meta>
              <Card.Description>
                Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading,
                running, and writing.
              </Card.Description>
            </Card.Content>
            <Card.Content extra>
              <span>
                <Icon name="user" />
                22 Friends
              </span>
            </Card.Content>
          </Card>
        </Shape.Side>
      </Shape>
      <Divider />
      <Button.Group style={{ marginRight: '8px' }}>
        <Button icon onClick={() => setChange(!change)}>
          <Icon name="arrow left" />
        </Button>
        <Button icon>
          <Icon name="arrow up" />
        </Button>
        <Button icon>
          <Icon name="arrow down" />
        </Button>
        <Button icon>
          <Icon name="arrow right" />
        </Button>
      </Button.Group>
      <Button.Group>
        <Button icon>
          <Icon name="retweet" />
        </Button>
        <Button icon>
          <Icon name="retweet" flipped="horizontally" />
        </Button>
      </Button.Group>
    </>
  );
};
